<template>
    <div class="admin-header">
        <div class="admin-header-title">
            <span  style="cursor:pointer" @click="toIndex">一瓶奶博客管理系统</span>
            <span class="time" style="font-size: 16px;margin-left: 20px">{{nowTime}}</span>
        </div>
        <div style="display: inline-block;vertical-align: top;float: right;">
            <div style="margin-top:4px;width: 50px;height: 50px;border-radius: 25px;display: inline-block;overflow: hidden;vertical-align: top;">
                <img :src="user.imgUrl" width="50px" height="50px"/>
            </div>
            <el-dropdown style="margin-left: 5px" @command="handleCommand">
                <div  style="height: 60px;display: inline-block;vertical-align: top;">
              <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
                    <el-dropdown-menu slot="dropdown" style="margin-left: 20px">
                        <el-dropdown-item command="myself">个人中心</el-dropdown-item>
                        <el-dropdown-item divided command="exit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </div>

            </el-dropdown>
        </div>
    </div>
</template>

<script>
    export default {
        name: "aHeader.vue",
        data(){
            return{
                user : "",
                nowTime:"",
                nowWeek:"",
            }
        },
        methods : {
            handleCommand(command){
              if(command == 'exit'){
                  //退出
                  window.sessionStorage.removeItem("user");
                  this.$router.push('/admin/login')
              }else if(command == 'myself'){
                  //跳转页面
                  this.$router.push('/admin/userInfo')
              }
            },
          init(){
              this.user = JSON.parse(window.sessionStorage.getItem("user"));
          },
            toIndex(){
                this.$router.push('/admin/index');
            },
            //当前时间
            timeFormate(timeStamp) {
                let year = new Date(timeStamp).getFullYear();
                let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
                let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
                var week = timeStamp ? new Date(timeStamp) : new Date();
                if(week.getDay() == 1){
                    this.nowWeek="周一"
                } else if(week.getDay() == 2){
                    this.nowWeek="周二"
                } else if(week.getDay() == 3){
                    this.nowWeek="周三"
                } else if(week.getDay() == 4){
                    this.nowWeek="周四"
                } else if(week.getDay() == 5){
                    this.nowWeek="周五"
                } else if(week.getDay() == 6){
                    this.nowWeek="周六"
                } else {
                    this.nowWeek="周日"
                }
                let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
                let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
                this.nowTime = year + "/" + month + "/" + date +"  "+ this.nowWeek +"  "+ hh +":"+ mm ;
                // console.log(this.nowTime)
                clearInterval(this.Times);
            },
            // 定时器函数
            nowTimes(){
                this.timeFormate(new Date());
                this.Times=setInterval(this.nowTimes,1000);
            },
        },
        mounted() {
            this.init();
        },
        // 创建完成时
        created() {
            this.nowTimes();
        },


    }
</script>

<style>
    .admin-header-title{
        font-size: 25px;
        float: left;
        display: inline-block;
        vertical-align: top;
        height: 60px;
        margin-left: 20px;
    }
.admin-header{

}
.el-dropdown-link {
    line-height: 60px;
    cursor: pointer;
    color: #f6fdff;
}
</style>